<template>
  <div class="account-container">
    <div class="header">
      <div class="title-group">
        <h2>结算账户</h2>
        <span class="subtitle">账户管理</span>
      </div>
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">
          <el-icon><plus /></el-icon>新增
        </el-button>
        <el-button @click="handleDisable">
          <el-icon><remove /></el-icon>禁用
        </el-button>
        <el-button @click="handleEnable">
          <el-icon><check /></el-icon>启用
        </el-button>
        <el-button @click="handleRefresh">
          <el-icon><refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="操作" width="120">
        <template #default>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">设为默认</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="accountNumber" label="账户编号" width="120" />
      <el-table-column prop="accountName" label="账户名称" width="120" />
      <el-table-column prop="currentBalance" label="当前余额" width="150" align="right">
        <template #default="{ row }">
          <span :class="{ 'negative': row.currentBalance < 0 }">
            {{ formatCurrency(row.currentBalance) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="initialBalance" label="期初余额" width="150" align="right">
        <template #default="{ row }">
          {{ formatCurrency(row.initialBalance) }}
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="建账日期" width="120" />
      <el-table-column prop="accountType" label="账户类别" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.isDefault" type="success" size="small">默认账户</el-tag>
          <el-tag v-else type="info" size="small">正常</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Plus,
  Remove,
  Check,
  Refresh
} from '@element-plus/icons-vue'

const tableData = ref([]) // 空数组，不包含数据

const formatCurrency = (value) => {
  if (value === null || value === undefined) return ''
  return new Intl.NumberFormat('zh-CN', {
    style: 'decimal',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value)
}

const handleAdd = () => {
  console.log('新增账户')
}

const handleDisable = () => {
  console.log('禁用账户')
}

const handleEnable = () => {
  console.log('启用账户')
}

const handleRefresh = () => {
  console.log('刷新数据')
}
</script>

<style scoped>
.account-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.title-group h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.title-group .subtitle {
  font-size: 14px;
  color: #888;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.negative {
  color: #f56c6c;
}

.el-table {
  margin-top: 20px;
  background-color: #fff;
}
</style>